import { FC } from 'react';
import { Grid } from '@mui/material';
import ResourceCard from '../../../components/resourceCard';
import './index.less';

const ResourcesList: FC = () => {
  return (
    <Grid
      container
      spacing={{ xs: 2, md: 3 }}
      columns={{ xs: 4, sm: 8, md: 12 }}
      className='resources-list'
    >
      {
        [1, 2, 3, 4, 5, 6, 7, 8, 11, 12, 13, 15].map(i => {
          return (
            <Grid
              item
              xs={2} sm={4} md={4}
              key={ i }
              className='resources-item'
            >
              <ResourceCard />
            </Grid>
          );
        })
      }
    </Grid>
  );
};

export default ResourcesList;
